<template>
  <el-aside width="200px" class="admin-sidebar">
    <div class="logo"><img src="../assets/logo.jpg" alt="Logo" width=200 height=auto/></div>
    <el-menu
        router
        :default-active="$route.path"
        background-color="#fff"
        text-color="#0b0a0a"
        active-text-color="rgba(42, 130, 148)"
        class="sidebar-menu"
    >
      <el-menu-item index="/manage/user">
        <i class="el-icon-user"></i>
        <h3>用户管理</h3>
      </el-menu-item>
      <el-menu-item index="/manage/canteen">
        <i class="el-icon-food"></i>
        <h3>餐厅管理</h3>
      </el-menu-item>
      <el-menu-item index="/manage/order">
        <i class="el-icon-tickets"></i>
        <h3>订单中心</h3>
      </el-menu-item>
      <el-menu-item index="/manage/community">
        <i class="el-icon-chat-dot-round"></i>
        <h3>社区管理</h3>
      </el-menu-item>
      <el-menu-item index="/manage/info">
        <i class="el-icon-house"></i>
        <h3>账号信息</h3>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'ManageSider'
}
</script>

<style scoped>
.admin-sidebar {
  position: fixed;
  width: 200px;
  background-color: #545c64; /*rgba(42, 130, 148)#545c64;*/
  z-index: 1000; /* 确保在内容上方 */
  overflow-y: auto; /* 允许菜单内容滚动 */
  height: 100vh;
  /*box-shadow: #333333 0 0 10px;*/
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(16, 81, 106);/* #434a50;*/
  position: sticky; /* logo固定 */
  z-index: 1001;
}

.sidebar-menu {
  height: calc(100vh - 60px); /* 减去logo高度 */
  border-right: none;

}

/* 隐藏原生滚动条（可选） */
.admin-sidebar::-webkit-scrollbar {
  width: 5px;
}
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.el-icon-user,
.el-icon-food,
.el-icon-tickets,
.el-icon-chat-dot-round,
.el-icon-house {
  margin-right: 8px;
}
</style>
